<template>
	<view class="moveGoods">
		<view class="moveTitle">
			<view class="moveTitleBox">
				<view class="moveName">
					给{{uName}}发货 >
				</view>
				<view class="moveBtn">
					<view class="edit" @click="changeEdit">编辑</view>
					<view>|</view>
					<view class="reset" @click="reset">重置</view>
				</view>
			</view>
		</view>
		
		<view class="stores">
			<view class="item" v-for="(store,index) in storeList"
				 :key="index">
				<img :src="'http://images.zmzpl.com/'+store.goods.img" alt="" class="img">
				<view class="info" @click="selectItem(index)">
					<span class="name">{{store.goods.name}}</span>
					<span class="quantity">库存:{{store.store.quantity}}</span>
				</view>

				<view v-if="!edit&&store.selected" class="iconfont iconh-itemselected"></view>

				<view class="del" v-if="edit" @click="remove(store)" >
					删除
				</view>
				<uni-number-box :min="1" v-if="edit" v-model="store.sq" class="num-input"></uni-number-box>
			</view>
		</view>
		<view class="yt-list-cell b-b" v-show="btnShow">
			<view class="uni-list-cell uni-list-cell-pd" style="display: flex; justify-content: space-between; align-items: center;">
				<view class="uni-list-cell-db">直接发货</view>
				<switch @change="swichChange" color="#f85e52" v-model="showAddress" />
			</view>
		</view>
		<view class="address" v-if="addressList.name" @click="toAddress" v-show="showAddress">
			<view class="addressTitle">
				<text>{{addressList.name}}</text>
				<text>{{addressList.mobile}}</text>
			</view>
			<view class="addressPo">
				{{addressList.province}}{{addressList.city}}{{addressList.county}}{{addressList.detail}}
			</view>
		</view>
		
		<view class="remark">
			<input class="remarkInput" type="text" :value="remark" placeholder="添加备注" @input="comitRemark"/>
			
		</view>
		<view class="btn" @click="transfer">点击提交</view>
	</view>
</template>

<script>
	import {showError} from '@/toast/index.js'
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
	import {transfer} from "@/api/store";
	import {info} from "../../api/user";
	import {getAddress} from "@/api/order";
	import {list} from "@/api/store";
	export default {
		data() {
			return {
				uId:0,
				uName:'',
				self: false,
				tem: {
					user: {},
					mallOrder: {
						items: []
					},
					remark: null,
					address: null
				},
				edit: false,
				showAddress: null,
				stores: [],
				addressList:{},
				remark:'',
				btnShow:null
			}
		},
		methods: {
			swichChange(e){
				this.showAddress=e.target.value
			},
			remove(store){
				store.selected = false
			},
			changeEdit() {
				if (this.storeSelectedList.length > 0) {
					this.edit = !this.edit
				}
			},
			reset() {
				this.edit = false
				this.stores.forEach(store => {
					store.selected = false
				})
			},
			toAddress() {
				uni.navigateTo({
					url:`/pages/address/address?source=1`
				})
			},
			selectItem(index) {
				if(this.edit){
					return
				}
				if (this.stores[index].selected) {
					// this.stores[index].selected = !this.stores[index].selected
					this.$set(this.stores[index], 'selected', !this.stores[index].selected)
				} else {
					this.$set(this.stores[index], 'selected', true)
				}
			},
			comitRemark(e){
				this.remark = e.detail.value
				// console.log(this.remark)
			},
			async list(){
				this.edit = false
				const {data:res} = await list()
				this.stores = res
				// console.log(res)
			},
			async getAddress(){
				const res = await getAddress(this.uId)
				// console.log(res)
			},
			async transfer(){
				if (this.storeSelectedList.length <= 0) {
					showError("请点击上面的产品并编辑数量")
					return;
				}
				if (!this.edit) {
					this.edit = true
					return
				}
				this.tem.address = this.addressList
				this.tem.mallOrder.items = []
				this.storeSelectedList.forEach(store => {
					if (store.sq && store.sq > 0) {
						let item = {
							goodsId: store.goods.id,
							quantity: store.sq
						}
						// console.log(item)
						this.tem.mallOrder.items.push(item)
					}
				})
				if( this.tem.mallOrder.items.length==0){
					showError("请点击上面的产品并编辑数量!")
					return;
				}
				this.tem.mallOrder.orderType = this.showAddress ? 0 : 1
				if (this.tem.mallOrder.orderType == 0) {
					if(!this.tem.address){//不存在地址 选择地址
						showError("请选择或者新增地址!")
						this.toAddress();
						return;
					}
					this.tem.mallOrder.address = this.tem.address.info
					this.tem.mallOrder.mobile = this.tem.address.mobile
					this.tem.mallOrder.userName = this.tem.address.name
					this.tem.mallOrder.remark = this.remark
					// console.log(this.tem)
				}
				// console.log(this.item)
				const res = await transfer(this.tem)
				// console.log(res)
				if(res.code==10000){
					uni.showToast({
						title:'操作成功',
						success() {
							setTimeout(()=>{
								uni.navigateBack()
							},500)
							
						}
					})
				}
			},
			async info(){
				const {data:res} = await info()
				// console.log(res)
				this.tem.user.name = res.name
				this.tem.user.code = res.code
				this.tem.user.id = res.id
			}
			
		},
		onLoad(option) {
			this.uId = option.id
			this.uName = option.name
			this.code = option.code
			
			this.tem.remark = ''
			if(option.type=='push'){
				// console.log(option.type)
				this.btnShow = false
				this.showAddress = true
				this.info()
			}else{
				this.tem.user.name = option.name
				this.tem.user.code = option.code
				this.tem.user.id = option.id
				this.btnShow = true
			}
			this.list()
			// this.getAddress()
			
		},
		watch: {
			showAddress() {
				if (this.showAddress && !this.tem.address) {
					this.toAddress()
				}
			}
		},
		computed: {
			storeList() {
				if (this.edit) {//只返回选中的
					return this.storeSelectedList
				} else {
					return this.stores
				}
			},
			storeSelectedList() {
				return this.stores.filter(store => store.selected)
			}
		}
	}
</script>

<style lang="stylus" scoped>
.moveGoods
	background-color #EFEFEF
	height 100vh
	.moveTitle
		width 100%
		height 88rpx
		.moveTitleBox
			background-color #fff
			height 100%
			border-radius 10px
			width 710rpx
			margin 0 auto
			padding 0 35rpx
			display flex
			justify-content space-between
			align-items center
			.moveName,.moveBtn
				color #6F6F6F
				font-size 28rpx
				font-weight 300
			.reset
				color #F7895E
			.moveBtn
				display flex
				width 168rpx
				justify-content space-between
	.stores
		background-color white
		margin-top 10px
		border-radius 5px
		overflow hidden

		.item
			position relative
			border-bottom-color #DCDCDC
			height 80px
			display flex
			align-items center

			.iconfont
				border-radius 50%
				width 20rpx
				height 20rpx
				font-size 18px
				background #F7895E
				position absolute
				right 30px
				top 30px

			.img
				width 50px
				height 50px
				border-radius 5px
				margin 0 15px
				flex 0 0 50px

			.info
				flex 1
				display flex
				flex-direction column
				height 50px

				.name
					text-wrap none
					text-overflow ellipsis
					font-size: 14px;
					font-family: PingFang SC;
					font-weight: 300;
					color: rgba(78, 61, 7, 1);
					margin 5px 0px 10px

				.quantity
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 300;
					color: rgba(161, 161, 161, 1);

			.del
				height 100%
				width 50px
				background-color #F7895E
				font-size 12px
				color #FFFFFF
				display flex
				align-items center
				justify-content center

			.num-input
				position absolute
				right 90px
				bottom 11px
				
	.remarkInput
		width 100%
		height 88rpx
		border 1rpx solid #F7895E
	.btn
		margin-bottom 20px
		height 40px
		text-align center
		background-color #F7895E
		color white
		line-height 40px
		font-size 14px
		margin-top 20px
		border-radius 20px
	

			
</style>
